// 加载场景代码
let app = new THING.App({
    url: "https://www.thingjs.com/api/scene/db0df07bbd1c14e3df799b8f",
    skyBox: 'Dark',
    env: 'Seaside',
    compatibleOptions: {rendering: true} // 开启兼容1.0渲染的模式
});
//建筑
let building = null;
//园区
let campus = null;
//发送消息类
let sender = new Sender();

app.on('load', function (ev) {
    console.log("模型加载成功。。。");
    callFuncInMain();
    // 开启层级切换
    app.level.change(ev.campus);
    campus = ev.campus;
    building = app.query(".Building")[0];
    //关闭，进到室内自动切换天空盒
    app.level.options['autoChangeBackground'] = false;
    setEnterFly();
    mousemove();
    app.background = '#363636';
});


// 发送消息
function callFuncInMain() {
    let message = {
        type: 'modeOk',
        param: null,
        text: '模型加载成功',
    }
    // 向父窗体(用户主页面)发送消息
    // 第一个参数是具体的信息内容，
    // 第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送
    sender.send(message);
}

// 修改默认的层级飞行响应
function setEnterFly() {
    // 进入建筑摊开楼层
    app.on(
        THING.EventType.EnterLevel,
        ".Building",
        function (ev) {
            var previous = ev.previous; // 上一层级
            console.log('---1--', ev.current);
            ev.current.expandFloors({
                time: 1000,
                length: 6,
                horzMode: true,
                complete: function () {
                    console.log("ExpandFloor complete ");
                },
            });
        },
        "customEnterBuildingOperations"
    );

    //  退出建筑关闭摊开的楼层
    app.on(
        THING.EventType.LeaveLevel,
        ".Building",
        function (ev) {
            var current = ev.current; // 当前层级
            ev.object.unexpandFloors({
                time: 500,
                complete: function () {
                    console.log("Unexpand complete ");
                },
            });
        },
        "customLeaveBuildingOperations"
    );
}

// 鼠标滑入事件
function mousemove() {
    // 选择室外所有物体 + 所有建筑
    var objs = app.query('.Building').add(campus.things);
    //initThingJsTip("鼠标滑入物体时，物体颜色变红");
    var floor = app.query('.Floor')[0]; // 获取楼层对象
    var things = floor.things; // 楼层内Thing类模型
    things.forEach(function (item) {
        item.on('mouseleave', function (ev) {
            ev.object.style.color = null;
            reset();
        });
        item.on('mouseenter', function (ev) {
            // ev.object.style.color = '#ff0000';
            createMarker();
            useMarker(ev.object)
        });
    })


}

//创建物体顶牌
function createMarker() {
    var html =
        `<div id="board" class="marker" style="position: absolute;display:none;">
              <div class="text" style="color: #FF0000;font-size: 12px;text-shadow: white  0px 2px, white  2px 0px, white  -2px 0px, white  0px -2px, white  -1.4px -1.4px, white  1.4px 1.4px, white  1.4px -1.4px, white  -1.4px 1.4px;margin-bottom: 5px;">
              </div>
              <div class="picture" style="height: 30px;width: 30px;margin: auto;">
                  <img src="https://www.thingjs.com/guide/examples/images/navigation/pointer.png" style="height: 100%;width: 100%;">
              </div>
          </div>`;
    $('#div3d').append($(html));
}

function useMarker(obj) {
    var item = app.query('#' + obj.id)[0];
    app.create({
        type: 'UIAnchor',
        parent: item,
        element: createElement(item),
        localPosition: [0, 2, 0],
        //[0,0]即以界面左上角定位，[1,1]即以界面右下角进行定位
        pivot: [0.5, 1]
    });
    $('#' + item.id + " .text").text("name：" + item.name);
}

// 生成一个新面板
function createElement(item) {
    var srcElem = document.getElementById('board');
    var newElem = srcElem.cloneNode(true);
    newElem.style.display = "block";
    newElem.setAttribute("id", item.id);
    app.domElement.insertBefore(newElem, srcElem);
    return newElem;
}

//重置
function reset() {
    $(".marker").remove();  // 移除标注
}